
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>添加商品</title>
	<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
	<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
	<script th:src="@{/js/selectM.js}" type="text/javascript"></script>
	<script th:src="@{/js/selectN.js}" type="text/javascript"></script>
	<link rel="stylesheet" th:href="@{/upload/css/publish.css}" media="all">
	<script type="text/javascript" th:src="@{/upload/js/move.js}"></script>
	<script type="text/javascript" th:src="@{/upload/js/publishImg.js}"></script>
	<!---->
	<!--<script type="text/javascript" th:src="@{/js/inputTag.js}"></script>
	<link th:href="@{/css/inputTag.css}" rel="stylesheet" />-->
</head>
<body>

<div class="layui-container" style="margin: 10px 0px;">

	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>商品介绍</legend>
	</fieldset>

	<form class="layui-form layui-form-pane">

		<input type="hidden" name="picUrl" id="picUrl">
		<input type="hidden" name="gallery" id="gallery">

		<div class="layui-form-item">
			<label class="layui-form-label">商品编号</label>
			<div class="layui-input-block">
				<input type="text" name="goodsSn" lay-verify="requied|goodsSn" class="layui-input" placeholder="请输入商品编号"  autocomplete="off"/>
			</div>
		</div>
		<!---->

		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-block">
				<input class="layui-input" lay-verify="required" name="name" autocomplete="off" placeholder="请输入商品名称" />
			</div>
		</div>

		<!---->
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">市场售价</label>
				<div class="layui-input-inline">
					<input class="layui-input" name="marketPrice" lay-verify="required" autocomplete="off" placeholder="     /￥"/>
				</div>
			</div>
		</div>
		<!---->
		<!---->
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">当前售价</label>
				<div class="layui-input-inline">
					<input class="layui-input" name="currentPrice" lay-verify="required" autocomplete="off" placeholder="     /￥"/>
				</div>
			</div>
		</div>
		<!---->
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">是否新品</label>
				<div class="layui-input-inline" style="width: 225px;">
					<input type="radio" name="isNew" value="0" title="新品" checked/>
					<input type="radio" name="isNew" value="1" title="非新品" />
				</div>
			</div>
		</div>
		<!---->
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">是否热卖</label>
				<div class="layui-input-inline" style="width: 225px;">
					<input type="radio" name="isHot" value="0" title="普通" checked/>
					<input type="radio" name="isHot" value="1" title="热卖" />
				</div>

			</div>
		</div>

		<!---->
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">是否在售</label>
				<div class="layui-input-inline" style="width: 225px;">
					<input type="radio" name="onSale" value="0" title="在售" checked/>
					<input type="radio" name="onSale" value="1" title="未售" />
				</div>

			</div>
		</div>
		<!---->
		<!--图片-->

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">选择</label>
				<div class="layui-input-inline" style="width: 225px;">
					<a class="layui-btn layui-btn-normal" id="checkPhoto">+</a>
					<div class="layui-upload-list" >
						<img class="layui-upload-img" id="photo"
							 style="border: 1px solid #01AAED;border-radius: 4px;width: 100px;height: 100px" >
						<p id="photoText"></p>
					</div>
					<div style="width: 100px;margin: 5px;left: 10px;">
						<div class="layui-progress layui-progress-big" lay-showpercent="yes"
							 lay-filter="photoProgress">
							<div class="layui-progress-bar layui-bg-blue" lay-perent="20%"></div>
						</div>
					</div>

				</div>

			</div>
		</div>
		<!---->
		<!---->
		<div style="width:720px; height: 300px;margin:0 auto;">
			<div class="layui-tab layui-tab-card" style="width: 720px">
				<div class="layui-form-item">
					<div class="layui-input-inline">
						<label class="layui-form-label">宣传画廊</label>
						<a class="layui-btn layui-btn-normal" id="addZmImg">+</a>
						<div class="layui-upload-list ">

						</div>
					</div>
				</div>
				<div class="img" style="width: 748px;height: 200px">
					<ul id="imgZmList" class="imgUl" style="width: 748px;height: 200px" ></ul>
				</div>
				<!---->
				<div style="width: 200px;margin: 5px">
					<div class="layui-progress layui-progress-big" lay-showpercent="yes"
						 lay-filter="galleryProgress">
						<div class="layui-progress-bar layui-bg-blue" lay-perent="20%"></div>
					</div>
				</div>
				<!---->
			</div>
			<div id="cropperdiv"></div>
		</div>
		<!---->

		<!---->
		<div class="layui-form-item" style="margin-top: 10px;">
			<label class="layui-form-label">所属品牌商</label>
			<div class="layui-input-inline">
				<select class="layui-select" name="brandId" id="brandId" >
					<option value="">请选择</option>
				</select>
				<!--<input class="layui-input" name="brandId" >-->
			</div>
		</div>

		<!---->
		<!--<div class="layui-form-item" id="goods">
			<label class="layui-form-label">关键字</label>
			<div class="fairy-tag-container">
				<input type="text" name="keyword" class="fairy-tag-input goods" autocomplete="off" >
			</div>
		</div>-->

		<div class="layui-form-item" id="goods">
			<label class="layui-form-label">关键字</label>
			<div class="layui-input-inline">
				<input type="text" name="keyword" class="layui-input" autocomplete="off" >
			</div>
		</div>

		<!---->

		<div class="layui-form-item">
			<label class="layui-form-label">所属分类</label>
			<div class="layui-input-block" id="categoryId">

				<div class="layui-unselect layui-form-select">

				</div>
			</div>

			<!---->
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">商品单位</label>
					<div class="layui-input-inline">
						<input class="layui-input" name="num" autocomplete="off" placeholder="件/个/盒..." />
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">商品简介</label>
					<div class="layui-input-inline">
						<input  class="layui-input" name="brief" autocomplete="off" placeholder="" />
					</div>
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">商品详情</label>
				<div class="layui-input-block">
					<textarea id="demo"  class="layui-textarea" name="detail"></textarea>
				</div>
			</div>



			<div class="layui-form-item">
				<div style="text-align: center;display: none">
					<a class="layui-btn  layui-btn-normal" id="submitBtn" lay-submit="" lay-filter="submitBtn">
						<i class="layui-icon layui-icon-ok"></i>
						确定保存
					</a>
					<a class="layui-btn layui-btn-primary" id="cleanBtn">
						<i class="layui-icon layui-icon-fonts-clear"></i>
						清空重置
					</a>
				</div>
			</div>

	</form>

</div>

<script>

	var $;
	layui.use(['layedit', 'table','form','jquery','layer','upload','element','selectN','selectM'],function(){
		$ = layui.jquery;
		var form = layui.form,
				upload = layui.upload,
				layer = layui.layer,
				element = layui.element,
				selectN = layui.selectN,
				selectM = layui.selectM,
				layedit = layui.layedit;

		getClassName();
		//
		layedit.build(''); //建立编辑器

		//
		/*inputTag.render({
			elem: '.goods',
			data: ['你好', '世界', '汤姆', '杰瑞'],
			//permanentData: ['世界'],

		});*/

		//证明多图片上传
		upload.render({
			elem: '#addZmImg',
			url: '/file/fc/fileUpload',
			multiple: true,
			accept: 'images',
			before: function (obj) {
				//预读本地文件示例，不支持ie8
				obj.preview(function (index, file, result) {
					$('#imgZmList').append('<li  style="position:relative"><img name="gallery" src="' + result + '"width="150" height="113">' +
							'<div class="img_edit layui-icon" onclick="croppers_pic(this)">&#xe642;</div>' +
							'<div class="img_close" onclick="deleteElement(this)">X</div></li>');

					var num = $('.img ul li').length;
					if(num==2){
						$('#addZmImg').hide();
					}else{
						$('#addZmImg').show();
					}

					form.render();
					imgMove("imgZmList");
				});
				element.progress('galleryProgress','0%');
			}
			, done: function (res) {
				//上传完毕
				if (!res.is){
					layer.msg('上传失败，请稍后再试......');
				}else {
					$('#gallery').val(res.file.id);
				}
			},
			progress:function (n,el,e) {
				element.progress('galleryProgress',n+"%");
				if (n==100){
					layer.msg('上传完成!',{icon:1});
				}
			}
		});

		//图片上传
		var photoUpload = upload.render({
			elem:'#checkPhoto',
			url:'/file/fc/fileUpload',
			before:function(obj){
				obj.preview(function(i,f,r){
					$('#photo').attr('src',r);
				});
				element.progress('photoProgress','0%');

			},
			done:function(res){
				if(!res.is){
					layer.msg('上传失败，请稍后重试......');
				}else{
					$('#picUrl').val(res.file.id);
					imgMove("imgZmList");
				}
			},
			error:function(){

			},
			progress:function(n,el,e){
				element.progress('photoProgress',n+"%");
				if(n==100){
					layer.msg('上传完成！',{icon:1});
				}
			}
		})

		//清空
		$('#cleanBtn').on('click',function(){
			$('.layui-form input').val("");
			$('.layui-textarea').val("");
		})
		//多选标签-基本配置
		var tagIns1 = selectM({
			//元素容器【必填】
			elem: '#categoryId'
			//候选数据【必填】
			,data: '/goods/gc/category',
			max:1
			,width:400
			//添加验证
			,//verify:'required'
		});

		form.on('submit(submitBtn)',function (data) {
			var formData =  data.field;
			console.log(formData);
			$.ajax({
				type:'post',
				url:'/goods/gc/add',
				data:formData,
				dataType:'json',
				success:function (result) {
					layer.msg(result.msg);
					if (result.is){
						let index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);  //编辑成功后关闭父页面窗口
						parent.layui.table.reload('goodsListTable');//根据表格id刷新父页面表格
					}
				}
			})
		})

	});

	//brand
	function getClassName() {
		$.ajax({
			type: 'get',
			url:'/goods/gc/brandClass',
			dataType: 'json',
			success:function (res) {


				$.each(res.obj,function (o,cn) {

					//console.log(JSON.stringify(res.obj));

					var option = '<option value="'+cn.id+'">'+cn.name+'</option>';
					$('#brandId').append(option);
				})
				layui.form.render("select");//重新渲染
			}
		})

	}

	function btnSubmit(){
		$('#submitBtn').click();
	}




</script>

</body>
</html>

